<template>
    <div>
        <Card>
            <p slot="title">
                添加车辆
            </p>
            <div>
                <Form class="step-form" ref="orderData" :model="orderData"  :label-width="100">
                    <Row span="12">
                        <i-col span="6">
                            <FormItem  label="车辆品牌：" label-position="left" :label-width="150">
                                <Select style="width:200px"  label-in-value >
                                    <Option @click.native="setSourceParty(item)" v-for="(item,index) in partys" :value="item.id" :key="index" :label="item.name">{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="6">
                            <FormItem  label="车辆型号：" label-position="left" :label-width="150">
                                <Select style="width:200px"  label-in-value >
                                    <Option @click.native="setPartyUser(item)" v-for="(item,index) in partys" :value="item.id" :key="index" :label="item.name">{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="车价号："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.out_color" type="text" placeholder="请输入车价号" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="车价单量："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.in_color" type="text" placeholder="请输入车辆单价" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="购车定金："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.in_color" type="text" placeholder="请输入购车定金" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="购车尾款："  label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="orderData.in_color" type="text" placeholder="请输入购车尾款" />
                            </FormItem>
                        </i-col>
                    </Row>

                    <FormItem >
                        <Button :disabled="hasSubmit" @click="saveData" style="width:100px;" type="primary">提交</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
    import ajax from '../../../libs/axios.js'
    export default {
        name: 'addUser',
        data () {
            return {
                model13: '',
                loading1: false,
                options2: [],
                options1:[],
                partys:[],//企业的集合
                users:[],//手机端用户的集合
                areaList:[],//省的集合
                areaCityList:[],//市的集合
                partyName:'',//车源企业选择
                orderData:{
                    source_id:'',
                    user_id:'',
                    intention_money:'',//意向金
                    price:'',
                    province:'',
                    city:'',
                    out_color:'',//外观颜色
                    in_color:'',//内饰颜色
                    is_check:0//是否验车
                },
                testModelShow:false,
                userId:'',//用户的id
                hasSubmit: false
            }
        },
        methods: {
            // 数据初始化
            init () {
                this.userId = window.localStorage.getItem('userId')
                this.$store.commit('setActiveName', 'orderv2index')
                this.initData()
            },
            setSourceParty(item){
                this.partyName = item.name
            },
            selectCarSource(item){
                let that = this
                that.orderData.source_id = item.value
                //设置金额数量
                that.options1.forEach(item => {
                    if (that.orderData.source_id === item.value) {
                        that.orderData.price = item.data
                    }
                })
            },
            remoteMethod1 (query) {
                let that = this
                if (query !== '') {
                    this.loading1 = true;
                    setTimeout(() => {
                        this.loading1 = false;
                        let url = 'adminlogin/v2/carorder/selectInfosByModel'
                        let data = {
                            searchInfo:query,
                            partyName:that.partyName
                        }
                        ajax.formRes(url, data).then(res => {
                            if (200 == res.code) {
                                const list = res.carSources.map(item => {
                                    return {
                                        value: item.id,
                                        label: item.model,
                                        data: item.price
                                    };
                                });
                                that.options1 = list
                            } else {
                                that.$Message.success('数据原因，请联系管理员。');
                            }
                        }).catch(res => {
                            console.log('有错误信息')
                        })
                    }, 200);
                } else {
                    this.options1 = [];
                }
            },
            //默认加载数据
            initData(){
                let that = this
                let url = 'adminlogin/v2/carorder/initData'
                let data = {}
                ajax.formRes(url, data).then(res => {
                    if (200 == res.code) {
                        that.partys = res.partys
                        that.areaList = res.area;
                    } else {
                        that.$Message.success('数据原因，请联系管理员。');
                    }
                }).catch(res => {
                    console.log('有错误信息')
                })
            },
            setPartyUser(obj){
                this.users = obj.users;
            },
            //发布报价设置
            carOfferUser(obj){
                this.orderData.user_id = obj.id
            },
            setArea(obj){
                this.orderData.province = obj.cityName
                this.areaCityList = obj.citys;
            },
            // 添加数据
            saveData () {
                let that = this
                that.$refs['orderData'].validate((valid) => {
                    if (valid) {
                        that.hasSubmit = true
                        let url = 'adminlogin/v2/carorder/addInfo'
                        let data = that.orderData
                        ajax.formRes(url, data).then(res => {
                            // success
                            that.$Message.success('新增数据成功,页面正在跳转')
                            that.hasSubmit = false
                            let argu = {
                            }
                            that.$router.push({
                                name: 'orderv2index',
                                params: argu
                            })
                        }).catch(res => {
                            console.log('有错误信息')
                            // fail
                        })
                    } else {
                        console.log('新增失败。。。')
                    }
                })
            },
            goBack () {
                this.$router.push({
                    name: 'vehicleinfo'
                })
            }

        },
        created: function () {
            this.init()
        },
        activated: function () {
            //this.init()
        }
    }
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

